<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="~{fragments/layout :: header}"></head>
<body>
    <div class="header">
        <h2>STK管理系统</h2>
        <div>
            <span th:text="${#authentication.name}"></span>
        </div>
    </div>

    <div class="container">
        <div th:replace="~{fragments/layout :: menu}"></div>
        
        <div class="content">
            <h2>单位管理</h2>
            
            <!-- 添加单位按钮 -->
            <button onclick="showAddForm()" sec:authorize="hasRole('ADMIN')" class="btn">添加单位</button>
            
            <!-- 单位列表 -->
            <table border="1" style="margin-top: 20px; width: 100%; border-collapse: collapse;">
                <thead>
                    <tr>
                        <th>编码</th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>上级单位</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="dept : ${departments}">
                        <td th:text="${dept.code}"></td>
                        <td th:text="${dept.name}"></td>
                        <td th:text="${dept.type}"></td>
                        <td th:text="${dept.parent?.name}"></td>
                        <td>
                            <button th:onclick="'editDepartment(' + ${dept.id} + ')'" 
                                    sec:authorize="hasRole('ADMIN')">编辑</button>
                            <button th:onclick="'deleteDepartment(' + ${dept.id} + ')'"
                                    sec:authorize="hasRole('ADMIN')">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="footer">
        <p>Copyright © 2025 STK管理系统</p>
    </div>

    <style>
        table th, table td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        
        table thead {
            background-color: #f5f5f5;
        }
        
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 8px 16px;
            border: none;
            cursor: pointer;
            margin: 5px;
        }
        
        .btn:hover {
            background-color: #45a049;
        }
    </style>

    <script>
        function showAddForm() {
            // TODO: 实现添加单位的表单显示逻辑
            alert("添加单位功能开发中...");
        }
        
        function editDepartment(id) {
            // TODO: 实现编辑单位的逻辑
            alert("编辑单位功能开发中...");
        }
        
        function deleteDepartment(id) {
            if(confirm("确定要删除这个单位吗？")) {
                // TODO: 实现删除单位的逻辑
                alert("删除单位功能开发中...");
            }
        }
    </script>
</body>
</html>